<template>
	<view>
		<nav-bar title="绑定微信"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="input_form_box">
			<view class="input_box">
				<view class="name required">获取openId</view>
				<view class="select_info" @click="onGetOpenId">
					<text class="value" v-if="wxOpenId">已获取</text>
					<text class="select" v-else>点击获取</text>
				</view>
			</view>
			<view class="input_box line required">
				<view class="input_info">
					<input type="text" class="input_font_left" v-model="code" @confirm="onSubmit" placeholder="*请输入手机验证码" />
					<button @click="onSetCode">{{ codeText }}</button>
				</view>
			</view>
			<view class="form_but"><button class="active" @click="onSubmit">确认</button></view>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
let clear;
export default {
	data() {
		return {
			wxOpenId: '',
			code: '',
			//验证码
			codeText: '获取验证码',
			//验证码已发
			readonly: false
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onGetOpenId(){
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.wxOpenId = loginRes.authResult.openid;
				}
			});
		},
		//验证码按钮文字状态
		getCodeState() {
			clear && clearInterval(clear);
			const _this = this;
			this.readonly = true;
			this.codeText = '60S后重新获取';
			var s = 60;
			clear = setInterval(() => {
				s--;
				_this.codeText = s + 'S后重新获取';
				if (s <= 0) {
					clearInterval(clear);
					_this.codeText = '获取验证码';
					_this.readonly = false;
				}
			}, 1000);
		},
		// 发送验证码
		onSetCode() {
			this.$http
				.post('api/open/v1/send_sms', {
					phone: this.userInfo.phone,
					type: 3108
				})
				.then(res => {
					this.getCodeState();
				});
		},
		onSubmit() {
			if (!this.wxOpenId) {
				uni.showToast({
					title: '请获取微信openId',
					icon: 'none'
				});
				return;
			}
			if (!this.code) {
				uni.showToast({
					title: '请输入手机号验证码',
					icon: 'none'
				});
				return;
			}
			this.$http
				.post('api/mime/wallet/v1/bind', {
					wxOpenId: this.wxOpenId,
					code: this.code,
					type: 1102
				})
				.then(res => {
					uni.showToast({
						title: '绑定成功',
						duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						}
					});
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
page {
	background-color: #f5f5f5;
}
.input_form_box .input_box input.input_font_left {
	text-align: left;
}
</style>
